<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<!-- 群名称 -->
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">群名称</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.pro_info" placeholder="输入群名称" />
							</view>				
						</view>			
					</view> 
				</view>  
				
				<!-- 作业地点 -->
				<view class="form-wrap m-b2">
					<view class="form-textarea-item">
						<view class="label label-area">
							<text>群作业地点</text> 
							<view class="get-local-btn" @click="chooseLocation"> 
								<view class="iconfont">&#xe648;</view>
								<text>获取位置</text>
							</view>
						</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="params.address" placeholder="选择群作业地点" disabled maxlength="-1"></textarea>						
						</view>
					</view>
				</view>
			</view> 
			
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="form-lay-btn" @click="addGroup" >创建</view>
				</view>
			</view> 
		</template>
	</view>
</template>

<script> 
import {tc_map_key} from '@/config.js'
	export default {
		name: 'name',
		data() {
			return { 
				isLogin: false, 
				userInfo: uni.getStorageSync('userInfo'), 
				loadingState:{
					default:true,
					loading:false,
					compelted:false
				}, 
				isStop:true,
				list:[],
				params:{
					pro_info: '',
					address: '',
					gcj02_lat: '',
					gcj02_lng: '',
					address_tag: '',
				}

			}


		},
		async onLoad() {			
			this.isLogin=await this.$loginState('check');  
			if(this.isLogin){ 
			}
		},
		async onShow() {

		},
		methods: {
			
			// 选择位置
			chooseLocation:function(){
				let _this=this;
				uni.chooseLocation({
					success: function (res) { 
						_this.params.address=res.address;
						_this.params.gcj02_lat=res.latitude;
						_this.params.gcj02_lng=res.longitude; 
						_this.getAdress(res.latitude,res.longitude)
					}
				})
			},
			
			//获取地址信息
			getAdress: async function (lat,lng) {
				let res=await this.$api.yfk_api.getCityInfo({
					key:tc_map_key,
					location:lat+','+lng
				})     
				if(res.data.message=="query ok"){  
					this.params.address_tag=res.data.result.ad_info.city+'-'+res.data.result.ad_info.district; 
				} 
			},
			
			// 提交数据
			addGroup:async function(){
				let _this=this;
				if(this.params.pro_info==''){
					uni.showToast({
						icon:"none",
						title:"请输入群名称",
						mask:true
					})
					return 
				}
				if(this.params.address==''){
					uni.showToast({
						icon:"none",
						title:"群作业地点不能为空",
						mask:true
					})
					return 
				}
				if(this.isStop){
					this.isStop=false;
					
					uni.showLoading({
						mask:true,
						title:'创建中...'
					})
					
					let res=await this.$api.pro_api.addCommonTask({
						pro_info: this.params.pro_info,
						address: this.params.address,
						gcj02_lat: this.params.gcj02_lat,
						gcj02_lng: this.params.gcj02_lng,
						address_tag: this.params.address_tag
					}) 
					if(res.data.ret==0){
						uni.hideLoading(); 
						uni.showToast({
							icon:"success",
							title:"创建成功",
							mask:true,
							duration:1000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateBack({
										delta:1
									})
								},1000)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon:"none",
							image:"../../static/images/error.png",
							title:res.data.message,
							mask:true,
							duration:1000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
								},1000)
							}
						})
					}
				}
				
			} 
		},
		components: { 
		},

		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less" scoped> 
	  
	.label-area{
		width: 95%;
		display: flex;
		justify-content: space-between;
		padding-right:5%;
		.get-local-btn{	
			display: flex;
			justify-content: center;
			align-items: center; 
			padding:0 10rpx;
			background: #f00; 
			border-radius: 10rpx; 
			font-size: 30rpx;
			color:#fff; 
		}
	}
	
	
</style>
